<template>
  <div>
    <el-dialog
      v-if="localVisible"
      :visible.sync="localVisible"
      title="请选择登录账号"
      class="chose-account"
      width="800px"
      @close="handleDialogClose"
      @opened="onDialogOpened"
    >
      <div class="btn-wrapper">
        <el-button @click="openNewAccountDialog" class="new-account"
          >新增</el-button
        >
      </div>

      <!-- 用原生table替代el-table -->
      <table
        class="custom-table"
        style="width: 100%; height: 300px; border-collapse: collapse"
      >
        <thead>
          <tr>
            <th style="width: 200px; border: 1px solid #ddd; padding: 8px">
              商户名称
            </th>
            <th style="width: 200px; border: 1px solid #ddd; padding: 8px">
              商户id
            </th>
            <th style="width: 200px; border: 1px solid #ddd; padding: 8px">
              账号
            </th>
            <th style="border: 1px solid #ddd; padding: 8px">密码</th>
            <th style="border: 1px solid #ddd; padding: 8px">操作</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(account, index) in accounts"
            :key="index"
            style="border: 1px solid #ddd"
          >
            <td style="border: 1px solid #ddd; padding: 8px">
              {{ account.company_name }}
            </td>
            <td style="border: 1px solid #ddd; padding: 8px">
              {{ account.company_id }}
            </td>
            <td style="border: 1px solid #ddd; padding: 8px">
              {{ account.username }}
            </td>
            <td style="border: 1px solid #ddd; padding: 8px">
              {{ account.password }}
            </td>
            <td style="border: 1px solid #ddd; padding: 8px">
              <el-button size="small" @click="login(account)">登录</el-button>
            </td>
          </tr>
          <tr v-if="accounts.length === 0">
            <td colspan="5" style="text-align: center; padding: 20px">
              暂无数据
            </td>
          </tr>
        </tbody>
      </table>
    </el-dialog>

    <el-dialog
      v-if="newVisible"
      :visible.sync="newVisible"
      title="新增账号"
      class="new-account"
      width="500px"
    >
      <el-form class="form-wrapper">
        <el-form-item>
          <el-input placeholder="请输入商户名称" v-model="newCompanyName" />
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入商户id" v-model="newCompanyId" />
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入账号" v-model="newUsername" />
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入密码" v-model="newPassword" />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="newVisible = false">取消</el-button>
        <el-button type="primary" @click="addCompanyAccount">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { create_login_info, get_login_info } from "@/api/home/nav";

export default {
  name: "MultiSiteLoginModal",
  props: {
    showAccount: Boolean,
    loginAccount: String,
    navId: {
      type: [Number, null],
      default: null,
    },
  },
  data() {
    return {
      localVisible: false,
      newVisible: false,
      newCompanyName: "",
      newCompanyId: "",
      newUsername: "",
      newPassword: "",
      accounts: [],
    };
  },
  watch: {
    async showAccount(val) {
      this.localVisible = val;
      if (val && this.navId !== null) {
        const res = await get_login_info(this.navId);
        this.accounts = res.data || [];
      }
    },
  },
  methods: {
    handleDialogClose() {
      this.localVisible = false;
      this.$emit("update:showAccount", false);
    },
    onDialogOpened() {
      // 这里不再需要 el-table 的 doLayout
    },
    openNewAccountDialog() {
      this.newVisible = true;
    },
    login(accountRow) {
      const rawData = {
        username: accountRow.username,
        password: accountRow.password,
        companyId: accountRow.company_id,
        companyName: accountRow.company_name,
      };
      const newWin = window.open("about:blank", "_blank");
      newWin.name = JSON.stringify(rawData);
      newWin.location.href = this.loginAccount;
    },
    async addCompanyAccount() {
      const formData = new FormData();
      formData.append("nav_id", this.navId);
      formData.append("company_name", this.newCompanyName);
      formData.append("company_id", this.newCompanyId);
      formData.append("username", this.newUsername);
      formData.append("password", this.newPassword);
      await create_login_info(formData);
      this.newVisible = false;
      const res = await get_login_info(this.navId);
      this.accounts = res.data || [];
    },
  },
};
</script>

<style lang="scss">
.chose-account {
  .btn-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
  }
}

.form-wrapper {
  display: flex;
  flex-direction: column;
}

.custom-table {
  border: 1px solid #ddd;
  border-collapse: collapse;
  width: 100%;
  height: 300px;
}

.custom-table th,
.custom-table td {
  border: 1px solid #ddd;
  padding: 8px;
}
</style>
